<template>
  <div class="video-player">
    <video ref="videoRef" class="video-js" autoplay muted @dblclick="fullScreenVide"></video>
    <div class="offvideo">暂无视频资源，请检查设备</div>
    <div class="video-address-box" v-if="props.showDetail">
      <ul class="video-address-box-ul">
        <li class="video-address-box-li">门厅</li>
        <li v-if="onLine" class="video-address-box-li">
          <span class="date">{{ date }}</span>
          &nbsp;
          <span style="color: rgba(47, 219, 85, 1);">在线</span>
        </li>
        <li v-else class="video-address-box-li">
          <span style="color: rgba(235, 60, 50, 1);">离线</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, onUnmounted, nextTick, watch, toRefs } from 'vue';
import { WebRtcStreamer } from '../../utils/webRtc/webrtcstreamer';
import '../../utils/webRtc/adapter.min.js';
import { getDictDataList } from '../../utils/tool';

const props = defineProps({
  src: {
    type: String,
    default: () => ''
  },
  date: {
    type: String,
    default: () => ''
  },
  status: {
    type: Boolean,
    default: () => true
  },
  showDetail: {
    type: Boolean,
    default: () => true
  }
})
type TVideoPlayerInstance = any
let player: TVideoPlayerInstance = null // 注意：这里不能写成响应式数据，否则切换video地址会加载不出来
const rtcIP = ref(getDictDataList('WEB_RTC_URL')[0].name);
const videoRef = ref(null)
const webRtcServer = ref() as any
const onLine = ref(true)




const switchSource = (src: string) => {
  // 解决控制台报错
  nextTick(() => {



    webRtcServer.value && webRtcServer.value.disconnect()
    //192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
    // uerStore.rtcIP
    webRtcServer.value = new WebRtcStreamer(videoRef.value, rtcIP.value)
    //需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
    // webRtcServer.connect('rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4')

    webRtcServer.value.connect(src)




  })
}


const fullScreenVide = () => {
  if (videoRef.value.requestFullscreen) {
    videoRef.value.requestFullscreen();
  } else if (videoRef.value.mozRequestFullScreen) { /* Firefox */
    videoRef.value.mozRequestFullScreen();
  } else if (videoRef.value.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    videoRef.value.webkitRequestFullscreen();
  } else if (videoRef.value.msRequestFullscreen) { /* IE/Edge */
    videoRef.value.msRequestFullscreen();
  }
}

// 监控props中监控弹窗的变化来销毁视频流
const { status } = toRefs(props)

watch(
  () => status.value,
  newVal => {
    if (!newVal) {
      closeVideo()
      console.log(`%c` + `webrtc断开连接` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);
    } else {
      switchSource(props.src)
    }
  },
  {
    immediate: true,
    deep: true
  }
)



const closeVideo = () => {
  console.log(`%c` + `webrtc断开连接` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);

  if (webRtcServer.value) {

    webRtcServer.value.disconnect()
    webRtcServer.value = null

    console.log(`%c` + `webrtc断开连接` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);
  }
}

onUnmounted(() => {
  closeVideo()
})
</script>

<style lang="scss" scoped>
.video-player {
  width: 100%;
  height: 100%;
  position: relative;

  .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 2;
  }

  .offvideo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1F1F1F;
  }

  .video-address-box {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.68);
    color: white;
    z-index: 3;

    .video-address-box-ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;

      .video-address-box-li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        &:nth-child(1) {
          width: 50px;
        }


        .date {
          margin-top: 2px;
        }


      }

    }
  }
}
</style>